<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    React中的使用: 标签体文本和标签属性值上使用
      <p name={表达式}>{表达式}</p>
      作用: 动态显示表达式的值

    插值语法:
      写法: {{js的表达式}}  功能类似于react {js表达式}
      写在哪?: 标签体文本, 不能标签属性上使用
      作用: 动态显示表达式的值
      表达式中的变量读取哪里的数据?   vue实例对象的属性
      支持JS的所有数据类型
        在显示时, 会自动将数据转换为字符串值显示
        特别的: 
          undefined/null 显示空白    react也是这样的
          对象/函数也是支持     react不支持
          bigint/symbol也是支持
   -->

  <div id="app">
    <p>{{msg}}</p>
    <p>{{msg.toUpperCase()}}</p>
    <p>{{msg.length}}--{{3}}</p>
    <p>{{msg.length+2}}</p>
    <p>{{true}}--{{false}}</p>  
    <p>undefined：{{undefined}}</p>
    <p>null: {{null}}</p>
    <p>数组: {{[1, 'abc', true]}}</p>
    <p>对象: {{ {a: 1, b: 'abc'} }}</p>
    <p>调用实例的方法: {{ test() }}</p>
    <p>函数: {{ test }}</p>
    <p>bigint: {{ 3n }}</p>
    <p>symbol: {{ msg2 }}</p>

    <!-- <p>语句: {{ test(); }}</p> -->
  </div>

  <script src="../js/vue.js"></script>
  <script>


    const vue = new Vue({
      data: { // 这个对象总是称为data对象, 这个对象在内部被_data引用
        msg: 'hello',
        msg2: Symbol('msg2'),  // symbol
      }
    })
    vue.test = () => {
      return 'vue.test()'
    }
    vue.$mount('#app')

  </script>

  <script>
    /* 表达式: 
      一个数据或者一个变量  => 最简单的
      数据/变量与运算符的组合
      特点: 
        它总是有返回值
        它不能单独存在
    语句: 
      是一条可以单独存在的完整指令
      应该要以分号结尾, 但js可以省略分号, 它内部会自动给我们加分号
    */

    // 方式一: 函数声明  => 语句
    function fn () {
      
    }
    // 方式二: 函数表达式
    const fn2 = function () {  // 将函数表达式赋值fn2变量
      
    }

    // IIFE: 立即执行函数表达式
    (function () {
      
    })()  // 这个函数调用的表达式为什么能单独存在?   会自动加分号

    3 //  => 3;

    /* (function () {
      console.log('....')
    })   这个为什么没报错?*/
  </script>
</body>
</html>